<template>
	<div class="indexlayout-main-conent">
		<el-card>
		<el-form ref="formRef" :model="modelRef" :rules="rulesRef" label-width="120px" class="ruleForm"
			status-icon>

			<el-form-item label="密码" prop="oldpwd">
				<el-input type="password" v-model="modelRef.oldpwd" :placeholder="t('page.user.register.form-item-password')" />
			</el-form-item>
			<el-form-item label="新密码" prop="pwd">
				<el-input type="password" v-model="modelRef.pwd" :placeholder="t('page.user.register.form-item-password')" />
			</el-form-item>
			<el-form-item label="确认密码" prop="confirm">
				<el-input type="password" v-model="modelRef.confirm"
					:placeholder="t('page.user.register.form-item-confirmpassword')" />
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="submitForm">修改</el-button>
			</el-form-item>
		</el-form>
		</el-card>

	</div>
</template>

<script setup lang="ts">
	import { useI18n } from "vue-i18n";
	import { ParEditPwd, UserInfo } from './data.d'
	import { myInfo, ApiEditPwd } from './api'
	import {
		reactive,
		ref,
		onMounted

	} from 'vue'
	import type {
		FormInstance,
		FormRules,

	} from 'element-plus'
	import {
		ElMessageBox, ElForm, ElMessage
	} from 'element-plus';

	const { t } = useI18n();


	// 表单值
	const modelRef = ref({
		oldpwd:'',
		pwd: '',
		confirm: ''
	});

	
	// 表单验证
	const rulesRef = reactive({
		oldpwd: [
			{
				required: true,
				message: t('page.user.register.form-item-password.required'),
			},
			{ min: 6, max: 50, message: '密码长度应该是 6 to 50', trigger: 'blur' },
		],
		pwd: [
			{
				required: true,
				message: t('page.user.register.form-item-password.required'),
			},
			{ min: 6, max: 50, message: '密码长度应该是 6 to 50', trigger: 'blur' },
		],
		confirm: [
			{
				validator: (rule : any, value : string, callback : any) => {
					if (value === '') {
						return Promise.reject(t('page.user.register.form-item-password.required'));
					} else if (value !== modelRef.value.pwd) {
						return Promise.reject(t("page.user.register.form-item-confirmpassword.compare"));
					} else {
						return Promise.resolve();
					}
				}
			}
		],

	
	});

	// form
	const formRef = ref<typeof ElForm>();
	// 注册loading
	const submitLoading = ref<boolean>(false);
	/**
		* 提交
		*/
	const submitForm = async () => {
		submitLoading.value = true;
		try {
			const valid : boolean = formRef.value ? await formRef.value.validate() : false;
			if (valid === true) {
				let params:ParEditPwd={
					pwd:modelRef.value.oldpwd,
					newpwd:modelRef.value.pwd
				}
				ApiEditPwd(params).then(res => {
					ElMessageBox.alert("修改成功")
				})

			}
		} catch (error) {
			console.log('error', error);
			ElMessage.warning(t('app.global.form.validatefields.catch'));
		}
		submitLoading.value = false;
	};
</script>
<style scoped>
.ruleForm{
	width: 300px;
}
</style>